<!-- 电梯品牌统计 -->
<template>
	<div class="LiftBox">
		<div ref='echartsCol' class="line">
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.getColumnar()
		},
		data() {
			return {

			}
		},
		methods: {
			getColumnar() {
				let dom = this.$refs.echartsCol
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					title: {
						text: '电梯品牌'
					},
					legend: {
						data: ['数量'],
					},
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['日立', '奥克斯', '三星', '西子', '东芝', '其他'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '数量',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330]
					}]
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.LiftBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		width: 85%;
		height: 85%;
	}
</style>
